<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作牌OCR识别</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style type="text/css">
        a:link { color: black; }
        a:hover { color: red; }
        .noaccess{
            color: red!important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <!--                        <div class="layui-form-item layui-inline">-->
                    <!--                            <label class="layui-form-label">工作内容</label>-->
                    <!--                            <div class="layui-input-inline">-->
                    <!--                                <input type="text" name="job_content\@like" placeholder="" class="layui-input" autocomplete="off">-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dateinfo" class="layui-input" id="date1" placeholder="请选择时间区间"
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="ticket-table" lay-filter="ticket-table"></table>
        </div>
    </div>
</div>

<script type="text/html" id="ticket-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="upload">
        <i class="layui-icon layui-icon-add-1"></i>
        上传
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>

<script type="text/html" id="ticket-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" title="查看"><i
            class="layui-icon layui-icon-eye"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i
            class="layui-icon layui-icon-delete"></i></button>
</script>
</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'toast'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var toast = layui.toast;

        let MODULE_PATH = "${ctxPath}/ocr/";

        let cols = [[
            {type: 'checkbox'},
            // {title: '计划开始时间', field: 'startTime', align: 'center'},
            // {title: '计划结束时间', field: 'endTime', align: 'center'},
            // {title: '工作内容', field: 'jobContent', align: 'center'},
            // {title: '工作地点', field: 'jobLocation', align: 'center'},
            {title: '图片名称', field: 'name', align: 'center'},
            {title: '上传时间', field: 'createTime', align: 'center'},
            {title: '识别结果', field: 'result', align: 'center',templet: '#analysis'},
            {title: '负责人', field: 'master', align: 'center',templet: '#master'},
            {title: '施工人员', field: 'workers', align: 'center',templet: '#workers'},
            {title: '操作', toolbar: '#ticket-bar', align: 'center', width: 130}
        ]];

        table.render({
            elem: '#ticket-table',
            url: MODULE_PATH + 'data/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#ticket-toolbar',
            defaultToolbar: "",
            height: 'full-180'
            // , done: function (res, curr, count) {
            //     $.each(res['data'], function (i, j) {
            //         console.log(j['result'])
            //         if (j['result'] === '工作票无异常') {
            //             Layui_SetDataTableRowColor('table', i + 1, 'green');
            //         } else {
            //             Layui_SetDataTableRowColor('table', i + 1, 'red');
            //         }
            //     });
            // }
        });

        form.on('submit(ticket-query)', function (data) {
            table.reload('ticket-table', {
                where: data.field, page: {curr: 1}
            });
            return false;
        });

        table.on('tool(ticket-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                // window.edit(obj);
                showImg(obj)
            }
        });

        table.on('toolbar(ticket-table)', function (obj) {
            if (obj.event === 'upload') {
                window.upload();
            } else if (obj.event === 'delete') {
                window.batchRemove(obj);
            }
        });

        window.upload = function () {
            layer.open({
                type: 2,
                title: '工作票照片上传',
                shade: 0.5,
                area: ['900px', '500px'],
                content: MODULE_PATH + 'ocrupload'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '查看',
                shade: 0.1,
                area: ['400px', '380px'],
                content: MODULE_PATH + 'edit?id=' + obj.data['id']
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该记录？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove?ids=" + obj.data['id'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.message, {icon: 1, time: 1000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些记录？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove?ids=" + ids,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.message, {icon: 1, time: 1000}, function () {
                                table.reload('ticket-table');
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('ticket-table');
        }


        function showImg(obj) {
            $.ajax({
                url: MODULE_PATH + "getImage?url=" + obj.data.url,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    var imgHtml = "<img src='" + result + "' onerror=\"javascript:this.src='${ctxPath}/static/resource/images/pic404.png'\" width='1000px' height='800px'/>";
                    layer.open({
                        type: 1,
                        shadeClose: true,
                        scrollbar: false,
                        maxmin: true,
                        shade: 0.1,
                        title: "OCR标注图像" + obj.data.name,
                        content: imgHtml,
                        cancel: function () {
                        }
                    })
                }
            })
        }


        window.saveOrUpdate = function (name) {
            layer.open({
                type: 2,
                title: '人员信息',
                shade: 0.1,
                area: ['60%', '600px'],
                content: MODULE_PATH + 'view/saveOrUpdate' + '?name='+name
            });
        }
        // function Layui_SetDataTableRowColor(TabDivId, RowIndex, ColorString) {
        //     try {
        //         var div = $("[lay-id='ticket-table'] tr:eq(" + RowIndex + ")");
        //         if (div != null) //找到对象了
        //         {
        //             console.log(div)
        //             let result = div.getElementsByClassName('result');
        //             result.css("color", ColorString);
        //         } else {
        //             console.log('没有找到对象');
        //         }
        //     } catch (e) {
        //         console.log(e.message);
        //     }
        // }
    });
    function changeUser(str,num){
        if (str !== ""){
            let arr = str.split("、")
            let result = "<span>"+textArr[num]+"</span>"
            arr.forEach((item,idx) => {
                if (item.indexOf("*")!==-1){    //有*
                    item = item.replace("*","")
                    // result += "<a href='javascript:;' class='noaccess' onclick='saveOrUpdate(\'"+item+"\')'>"+item+"</a>"
                    result += '<a href="javascript:;" class=\'noaccess\' onclick="saveOrUpdate(\''+item+'\')">'+item+'</a>';
                }else {
                    // result += "<a href='javascript:;' onclick='saveOrUpdate(\'"+item+"\')'>"+item+"</a>"
                    result += '<a href="javascript:;" onclick="saveOrUpdate(\''+item+'\')">'+item+'</a>';
                }
                if (idx !== arr.length-1){
                    result+="、"
                }
            })
            return result
        }
    }
</script>
<script type="text/html" id="analysis">
    {{#  if(d.result === '工作票无异常'){ }}
    <span style="color: green;font-weight: bolder;">{{d.result}}</span>
    {{#  } else{ }}
    <span style="color: red;font-weight: bolder;">{{d.result}}</span>
    {{#  } }}
</script>
<script type="text/html" id="master">
    {{#  if(d.master !== ''){ }}
    {{#  if(d.master.indexOf("*")!==-1){ d.master = d.master.replace("*","")}}
    <a href="javascript:" class='noaccess' onclick="saveOrUpdate('{{d.master}}')">{{d.master}}</a>
    {{#  } else{ }}
    <a href="javascript:" onclick="saveOrUpdate('{{d.master}}')">{{d.master}}</a>
    {{#  } }}
    {{#  } else{ }}
    {{#  } }}
</script>
<script type="text/html" id="workers">
    {{#  if(d.workers !== ''){ }}
    {{#  d.workers.split("、").forEach((item,idx) => { }}
        {{#  if (item.indexOf("*")!==-1){ item = item.replace("*","") }}
    <a href="javascript:" class='noaccess' onclick="saveOrUpdate('{{item}}')">{{item}}</a>

    {{#  }else { }}
    <a href="javascript:" onclick="saveOrUpdate('{{item}}')">{{item}}</a>
    {{#  } }}
    {{#  if (idx !== d.workers.split("、").length-1){ }}
    <span>、</span>
    {{#  } }}
    {{#  }) }}
    {{#  } else{ }}
    {{#  } }}
</script>
</html>